<script lang="ts" setup>
import { injectState } from "../state";
import { whManagerBsTbParkGridGetListUsingPost } from "@/genapi/wh";

defineOptions({ name: "Filters" });

const {
	filter,
	page: { isLoading },
} = injectState()!;

const initial = { ...toRaw(filter.value) };
const data = ref({ ...initial });

const search = () => {
	filter.value = { ...toRaw(data.value) };
};

const reset = () => {
	data.value = { ...initial };
};

const gridList = ref([]);

const getGridList = async () => {
	const { data } = await whManagerBsTbParkGridGetListUsingPost({ data: {} });
	gridList.value =
		data?.map((item) => ({ label: item.name, value: item.id })) ?? [];
};

onMounted(() => {
	getGridList();
});
</script>

<template>
	<el-form class="filter-form" inline :model="data" :disabled="isLoading">
		<el-form-item label="园区网格">
			<el-select-v2
				class="w-240px!"
				:options="gridList"
				v-model="data.gridId"
				clearable
				placeholder="请选择网格"
			></el-select-v2>
		</el-form-item>
		<el-form-item label="巡查状态">
			<el-select
				class="w-240px!"
				v-model="data.patrolStatus"
				clearable
				placeholder="请选择状态"
			>
				<el-option label="已完成" value="1" />
				<el-option label="未完成" value="0" />
			</el-select>
		</el-form-item>

		<el-form-item>
			<el-divider direction="vertical" h="32px!" m="r-22px!" />
			<el-button type="primary" :loading="isLoading" @click="search">
				<template #icon>
					<el-icon class="i-custom:search" />
				</template>
				查询
			</el-button>
			<el-button @click="reset">
				<template #icon>
					<el-icon class="i-custom:reset" />
				</template>
				重置
			</el-button>
		</el-form-item>
	</el-form>
</template>
